<template>
    <div>
        <h2 style="text-align: center;">用户购买理财页面</h2>
        <table class="table-bordered" border="1">
            <tr>
                <td>理财产品名称</td>
                <td>
                    {{ info.F_Name }}
                </td>
            </tr>

            <tr>
                <td>年收益</td>
                <td>
                    {{ info.F_APY }}
                </td>
            </tr>

            <tr>
                <td>最低金额</td>
                <td>
                    {{ info.F_MinMoney }}
                </td>
            </tr>

            <tr>
                <td>风险等级</td>
                <td>
                    {{ (info.F_Level==0?"低风险":info.F_Level==1?"中风险":"高风险") }}
                </td>
            </tr>

            <tr>
                <td>购买金额</td>
                <td>
                    <input type="text" placeholder="请输入购买金额" v-model="BuyMoney" @change="GetMoney">
                </td>
            </tr>

            <tr>
                <td>每年预计收益</td>
                <td>
                    <span>{{ NewMoney.toFixed(2) }}CNY</span>
                </td>
            </tr>

            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="button" value="保存" class="btn btn-success" @click="SaveData">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useUserStore } from '../../store/index.ts';

//创建仓库实例
const userStore=useUserStore();

//创建路由信息对象实例
const route=useRoute();
const router=useRouter();

//创建响应式数据
const info=ref({
    F_Name:"",
    F_APY:"",
    F_MinMoney:0,
    F_Level:0
})

const BuyMoney=ref("")
const NewMoney=ref(0)

//创建生命周期函数钩
onMounted(()=>{
    GetInvestInfo()
})

//加载数据方法
const GetInvestInfo=()=>{
    axios.get("https://localhost:44321/api/Finans/SingleFinanInfo",
        {
            params:{
                Fid:route.params.Fid
            }
        }
    )
    .then(res=>{
        console.log(res.data)
        info.value=res.data
    })
}

const GetMoney=()=>{
    axios.get("https://localhost:44321/api/Finans/GetFinanMoney",
        {
            params:{
                Fmoney:BuyMoney.value,
                Fapy:info.value.F_APY
            }
        }
    )
    .then(res=>{
        console.log(res.data)
        NewMoney.value=res.data
    })
}

const SaveData=()=>{
    //判断购买金额不能为空
    if(BuyMoney.value=="")
    {
        alert('购买金额不能为空');
        return;
    }

    if(Number(BuyMoney.value)>100000000)
    {
        alert('用户购买金额不能大于一亿元');
        return;
    }

    if(Number(BuyMoney.value)<Number(info.value.F_MinMoney))
    {
        alert('用户购买金额不能大于最低理财金额');
        return;
    }

    axios.post("https://localhost:44321/api/Finans/AddUserFinanInfo",
        {
            U_Id:userStore.Uid,
            F_Id:route.params.Fid,
            UF_Money:BuyMoney.value
        }
    )
    .then(res=>{
        if(res.data>0)
        {
            alert('用户理财添加成功');
            router.push("/ShowUserFinanInfoPage")
        }
        else
        {
            alert('用户理财添加失败!!!');
        }
    })
    .catch(error=>{
        console.log(error);
    })
}
</script>